<template>
  <div class="bg-light">
    <div class="container-title">签约信息</div>
    <Form ref="form" :rules="rule" :model="form" style="display:flex;flex-wrap:wrap">
      <div style="flex:1;padding-left:30px;margin-right:10px">
        <FormItem label="门店名称: " prop="storeContractDTO.storeName" class="fleft">
          <Input v-model="sc.storeName" placeholder="请输入门店名称" :maxlength="60" /></Input>
        </FormItem>
        <FormItem label="营业执照编号: ">
          <span>{{ sc.businessLicenseNo }}</span>
        </FormItem>
        <FormItem label="经销商: ">
          <span>{{ sc.distributorName }}</span>
          <Button class="ml" size="small" @click="onChangeDealer">更换</Button>
        </FormItem>
        <FormItem label="签约品牌: ">
          <p>
            <span v-if="brandMain">{{ brandMain.brandName }}
              <span v-if="brandGuanlian.length">
                (<span v-for="i in brandGuanlian" :key="i.brandId" class="ml font-blue">{{ i.brandName }}</span>)
              </span>
            </span>
          </p>
        </FormItem>
        <FormItem label="授权品牌绑定: ">
          <p><span v-for="i in form.empowerBrandDTOList" :key="i.brandId" class="ml font-blue">{{ i.brandName }}</span></p>
        </FormItem>
        <FormItem label="门店类型: " class="fleft">
          <SelectList
            v-model="sc.storeTypeId"
            list-type="storeTypeList"
            @input="onChangeStoreType"
          />
          <!-- <p>{{sc.storeTypeName}}</p> -->
        </FormItem>
        <FormItem label="门店任务量: ">
          <p>{{ sc.storeTaskQuantity }}</p>
        </FormItem>
        <FormItem label="门头编号: " class="fleft">
          <Input v-model="sc.storeNo" placeholder="门头编号" :maxlength="60" />
        </FormItem>
        <FormItem label="备注信息: " class="fleft">
          <Input v-model="sc.memo" type="textarea" placeholder="请输入备注，最多50个字" :maxlength="50" style="width:100% " />
        </FormItem>
        <FormItem label="扩展字段1: ">
          <p>{{ findExtendStr('brandId') }}</p>
        </FormItem>
        <FormItem label="扩展字段2: ">
          <p>{{ findExtendStr('storeTypeId') }}</p>
        </FormItem>
      </div>
      <div style="flex:1;margin-right:10px">
        <FormItem label="签约状态: ">
          <RadioGroup v-model="sc.contractStatus">
            <Radio :label="1">
              <span>签约</span>
            </Radio>
            <Radio :label="2">
              <span>解约</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="签约审核通过时间: ">
          <p>{{ sc.enableDate }}</p>
        </FormItem>
        <FormItem label="门店合同确认时间: ">
          <p>{{ sc.storeContractAgreementDTO && sc.storeContractAgreementDTO.signConfirmDate }}</p>
        </FormItem>
        <FormItem label="门店维护人: ">
          <p>{{ sc.salesmanName }} <Button class="ml" size="small" @click="onChangeStoreOwner">变更</Button></p>
        </FormItem>
        <FormItem label="所在区域: ">
          <p>{{ (sc.provinceName || '') + (sc.cityName || '')+ (sc.areaName || '') }}</p>
        </FormItem>
        <FormItem label="详细地址: ">
          <p>{{ sc.address }}</p>
        </FormItem>
        <FormItem label="坐标: ">
          <p>{{ sc.lat }}-{{ sc.lng }}</p>
        </FormItem>
        <FormItem label="店主生日: ">
          <p>{{ sc.ownerBirthday }}</p>
        </FormItem>
        <FormItem label="签约手机号: ">
          <p>{{ sc.storePhone }}</p>
        </FormItem>
        <FormItem label="扩展字段3: ">
          <p>{{ findExtendStr('distributorId') }}</p>
        </FormItem>
        <!-- <FormItem label="门店手机号: ">
          <p>{{sc.storePhone}}</p>
        </FormItem> -->
      </div>
      <div style="flex:1;padding-right:30px">
        <FormItem label="门店基金开关: ">
          <RadioGroup v-model="sc.isOpenFund">
            <Radio :label="true">
              <span>开</span>
            </Radio>
            <Radio :label="false">
              <span>关</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="门店巡店开关: ">
          <RadioGroup v-model="sc.isOpenInspection">
            <Radio :label="true">
              <span>开</span>
            </Radio>
            <Radio :label="false">
              <span>关</span>
            </Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="工厂业务员巡店开关: ">
          <RadioGroup v-model="sc.isOpenSupplierInspection">
            <Radio :label="true" :disabled="!sc.isCanChangeOpenSupplierInspection">
              <span>开</span><span v-if="sc.isSpecialStore">(建店门店)</span>
            </Radio>
            <Radio :label="false" :disabled="!sc.isCanChangeOpenSupplierInspection">
              <span>关</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="经销商业务员巡店开关: ">
          <RadioGroup v-model="sc.isOpenDistributorInspection">
            <Radio :label="true" :disabled="!sc.isCanChangeOpenDistributorInspection">
              <span>开</span><span v-if="sc.isSpecialStore">(建店门店)</span>
            </Radio>
            <Radio :label="false" :disabled="!sc.isCanChangeOpenDistributorInspection">
              <span>关</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="轮胎保理赔资格: ">
          <p>{{ sc.isOpenProtectionClaims?'是':'否' }}</p>
        </FormItem>
        <FormItem label="授信账户: ">
          <p>{{ sc.isOpenCreditAccount?'是':'否' }}</p>
        </FormItem>
        <FormItem label="门店月度进货返利最高条数: " prop="storeContractDTO.maxRebateQuantity" class="fleft">
          <Input v-model="sc.maxRebateQuantity" placeholder="门店月度进货返利最高条数" :maxlength="60" />
        </FormItem>
        <FormItem label="门店进货积分最高条数: " prop="storeContractDTO.maxPurchaseQuantityIntegral" class="fleft">
          <Input v-model="sc.maxPurchaseQuantityIntegral" placeholder="门店进货积分最高条数" :maxlength="60" />
        </FormItem>
        <FormItem label="门店基金核算最高条数: " prop="storeContractDTO.maxFundQuantity" class="fleft">
          <Input v-model="sc.maxFundQuantity" placeholder="门店基金核算最高条数" :maxlength="60" />
        </FormItem>
        <FormItem label="门店基金单条轮胎系数: " prop="storeContractDTO.unitFund" class="fleft">
          <Input v-model="sc.unitFund" placeholder="门店基金单条轮胎系数" :maxlength="60" />
        </FormItem>
        <FormItem label="入库返利有效天数设置(天): " prop="storeContractDTO.inRebateExpiredDays" class="fleft">
          <Input v-model="sc.inRebateExpiredDays" placeholder="入库返利有效天数设置(天)" :maxlength="60" />
        </FormItem>
        <FormItem label="扫码定位距离设置（米）: " prop="storeContractDTO.scanDistanceRange" class="fleft">
          <Input v-model="sc.scanDistanceRange" placeholder="扫码定位距离设置（米）" :maxlength="60" />
        </FormItem>
      </div>
    </Form>
    <FooterBtns />
    <ChangeDealerModelItem ref="ChangeDealerModelItem" @change-dealer="changeDealer" />
    <ChangeStoreOwerModelItem ref="ChangeStoreOwerModelItem" @confirm="onConfirm" />
  </div>
</template>
<script>
// import AreaSelect from '@/components/AreaSelect'
// import AreaTree from '@/components/AreaTree'
// import ImageListUpload from '@/components/ImageListUpload'
import SelectList from '@/components/SelectList'
// import PictureEditItem from '~/PictureEditItem'
import FooterBtns from './FooterBtns'
import ChangeDealerModelItem from './ChangeDealerModelItem'
import ChangeStoreOwerModelItem from './ChangeStoreOwerModelItem'
import { mapGetters } from 'vuex'
export default {
  components: {
    // AreaSelect,
    // AreaTree,
    // ImageListUpload,
    // PictureEditItem,
    FooterBtns,
    ChangeDealerModelItem,
    ChangeStoreOwerModelItem,
    SelectList
  },
  props: {
    form: {
      type: Object
    }
  },
  data () {
    return {
      rule: {
        'storeContractDTO.storeName': [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
        'storeContractDTO.distributorName': [{ required: true, message: '请选择经销商', trigger: 'blur' }],
        'storeContractDTO.contractStatus': [{ required: true, message: '请选择签约状态', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['storeTypeList']),
    sc () {
      return this.form.storeContractDTO || {}
    },
    brandMain () {
      return this.form.storeContractDTO.storeContractBrandDTOList.find(item => item.brandType == 0) || {}
    },
    brandGuanlian () {
      return this.form.storeContractDTO.storeContractBrandDTOList.filter(item => item.brandType == 1) || {}
    }
  },
  mounted () {
  },
  methods: {
    valideForm () {
      return new Promise((resolve) => {
        this.$refs.form.validate(v => {
          resolve(v)
        })
      })
    },
    onConfirm (item) {
      let salesmanId = item.salesmanId
      let salesmanName = item.realname
      this.form.storeContractDTO.salesmanId = salesmanId
      this.form.storeContractDTO.salesmanName = salesmanName
    },
    onChangeStoreOwner () {
      let { distributorName, distributorId } = this.form.storeContractDTO
      this.$refs.ChangeStoreOwerModelItem.openModal({ distributorName, distributorId })
    },
    onChangeDealer () {
      this.$refs.ChangeDealerModelItem.openModal()
    },
    changeDealer (d, b, bg, role) { // 经销商 签约品牌 关联品牌 维护人
      const { currentBrandId: brandId, currentBrandName: brandName } = b
      let arr = [{ brandId, brandName, brandType: 0 }]
      arr = arr.concat(bg.map(item => {
        const { currentBrandId: brandId, currentBrandName: brandName } = item
        return {
          brandId, brandName, brandType: 1
        }
      }))
      const { distributorId, distributorName } = d
      const { storeContractDTO } = this.form
      storeContractDTO.distributorId = distributorId
      storeContractDTO.distributorName = distributorName
      storeContractDTO.storeContractBrandDTOList = arr
      storeContractDTO.salesmanId = role.salesmanId
      storeContractDTO.salesmanName = role.realname
      this.$set(this.form, 'storeContractDTO', storeContractDTO)
    },
    onChangeStoreType (v) {
      let item = this.storeTypeList.find(item => item.value === v) || {}
      this.form.storeContractDTO.storeTypeId = v
      this.form.storeContractDTO.storeTypeName = item.text
    },
    findExtendStr (key) {
      const storeContractSourceDTOList = this.form.storeContractDTO.storeContractSourceDTOList || []
      const result = storeContractSourceDTOList.find(item => item.sourceKey === key)
      return result ? result.sourceStrValue : '-'
    }
  }
}
</script>
